<template>
  <div>
    <!--面包屑-->
    <bread :bread="$route.meta.bread" />
    <!--页面-->
    <el-card>
      <!--搜索框-->
      <div>
        <el-input
          placeholder="输入搜索的关键字"
          class="input-with-select"
          v-model="query"
        >
          <el-button slot="append" icon="el-icon-search" @click="getlist()"></el-button>
        </el-input>
        <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
      </div>
      <!--table表格-->
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="#"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template v-slot="scope">
            <!-- {{ scope.row.id }} -->
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="status(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="backfill(scope.row)"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              type="danger"
              @click="removelist(scope.row)"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!--添加-->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="username" label-width="80px">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="80px">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="80px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile" label-width="80px">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addt('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑-->
    <el-dialog title="添加用户" :visible.sync="eflag">
      <el-form :model="backfilllist" :rules="rules" ref="form">
        <el-form-item label="用户名" label-width="80px">
          <el-input
            v-model="backfilllist.username"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" label-width="80px">
          <el-input v-model="backfilllist.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="80px">
          <el-input v-model="backfilllist.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="eflag = false">取 消</el-button>
        <el-button type="primary" @click="copyreader('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bread from "./../bread";
export default {
  components: { bread },
  name: "",
  data() {
    return {
      //分页搜索
      query: "",
      pagenum: 1,
      pagesize: 3,
      //数据列表
      list: [],
      backfilllist: {},
      total: 0,
      //状态
      dialogFormVisible: false,
      eflag: false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 9, message: "长度在 5 到 9 个字符", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //编辑回填数据
    backfill(obj) {
      this.backfilllist = obj;
      this.eflag = true;
    },
    //编辑
    copyreader(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios
            .put(`users/${this.backfilllist.id}`, {
              email: this.backfilllist.email,
              mobile: this.backfilllist.mobile,
            })
            .then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                this.eflag = false;
                this.getlist(); //重新渲染列表
                this.$message.success(res.meta.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    addt(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios.post("users", this.form).then((res) => {
            console.log(res);
            if (res.meta.status == 201) {
              this.dialogFormVisible = false;
              this.getlist(); //重新渲染列表
              this.$message.success(res.meta.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    async removelist(obj) {
      let { data: res } = await this.$axios.delete(`users/${obj.id}`);
      // console.log(res)
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getlist(); //重新渲染列表
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 状态更改
    async status(obj) {
      console.log(obj);
      let { data: res } = await this.$axios.put(`users/${obj.id}/state/${obj.mg_state}`);
      console.log(res);
      // if (res.meta.status == 200) {
        this.$message.success('修改状态成功');
      // } else {
      //   this.$message.error(res.meta.msg);
      //   return false;
      // }
    },
    //列表数据获取
    async getlist() {
      let { data: res } = await this.$axios.get(
        `users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      );
      // console.log(res);
      this.list = res.users;
      this.total = res.total;
    },
    //分页
    handleSizeChange(size) {
      this.pagesize = size;
      this.getlist(); //重新渲染列表
    },
    handleCurrentChange(page) {
      this.pagenum = page;
      this.getlist(); //重新渲染列表
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.el-card {
  .el-input {
    width: 30%;
    margin-right: 2%;
  }
  .el-table {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
.el-dialog {
  .el-input {
    width: 85%;
  }
}
</style>
